<template>
  <div class="courseIntroduction bg-fff">
    <p class="courseOutline-title">督导点评</p>
    <div v-if="currentvaluateList">
      <div class="expertReview">
        <div class="display-flex flex-between">
          <div style="margin-bottom: 15px">
            <span class="font-size-20 font-weight-500 color-00085"
              >{{
                currentvaluateList?.xm ? maskName(currentvaluateList.xm) : '**'
              }}的教学点评</span
            >
            <span
              v-if="currentvaluateList?.createTime"
              class="font-size-15 color-696E76 margin-left-8"
              >({{ currentvaluateList?.createTime }})</span
            >
          </div>
          <div class="font-size-16">
            <span class="color-00085">课程总体评价：</span>
            <span class="color-0F63ED font-size-24">{{ sumScore }}</span>
            <span>分</span>
          </div>
        </div>
        <div class="display-flex expertReview-title margin-bottom-5">
          <div>
            <img
              class="icon-size-16"
              src="@/assets/images/ic_book.png"
              alt=""
            />
            <span class="font-size-14 margin-left-8 color-696E76">{{
              currentvaluateList?.dwhName
            }}</span>
          </div>
          <div class="margin-left-40">
            <img class="icon-size-16" src="@/assets/images/class.png" alt="" />
            <span class="font-size-14 vertical-align-middle color-696E76">{{
              currentvaluateList?.bjmc
            }}</span>
          </div>
          <div class="margin-left-40">
            <img
              class="icon-size-16"
              src="@/assets/images/classroom.png"
              alt=""
            />
            <span
              class="font-size-14 vertical-align-middle margin-left-8 color-696E76"
              >{{ currentvaluateList?.cdmc }}</span
            >
          </div>
          <div class="margin-left-40">
            <img
              class="icon-size-16"
              src="@/assets/images/ic_clock.png"
              alt=""
            />
            <span
              class="font-size-14 vertical-align-middle margin-left-8 color-696E76"
              >{{ currentvaluateList?.classDate }} | 星期{{
                numberToChinese(currentvaluateList?.xq)
              }}</span
            >
          </div>
        </div>
        <div class="evaluateBox">
          <div
            class="evaluateList display-flex flex-between align-items-center font-size-14"
            v-for="(i, index) in currentvaluateList?.evaluates"
            :key="index"
          >
            <div class="w-92 color-00085 score-tiltle">
              <p class="font-weight-500 font-size-16 margin-top-8">
                {{ i.title }}
              </p>
              <p class="margin-top-8 color-696E76">{{ i.content }}</p>
            </div>
            <div
              class="color-0F63ED font-weight-600 score-box h-100 text-center"
            >
              <span class="font-size-24">{{ i.score }}</span>
              <span>分</span>
            </div>
            <img
              v-if="i.allScore == 10"
              class="score-tag"
              src="@/assets/images/tag_score10.png"
            />
            <img
              v-if="i.allScore == 20"
              class="score-tag"
              src="@/assets/images/tag_score20.png"
            />
          </div>
        </div>
        <div v-if="currentvaluateList?.comments">
          <p class="margin-top-16 color-18191A">课程评价与建议</p>
          <div class="suggestionBox margin-top-16 font-size-14">
            <p class="color-00065">
              {{ currentvaluateList?.comments }}
            </p>
          </div>
        </div>
      </div>
      <div class="toggleList display-flex font-size-14">
        <div
          class="pre text-center color-0F63ED cursor-pointer"
          :class="evaluateListIndex == 0 ? 'disabled' : ''"
          @click="handlePre"
        >
          上一条
        </div>
        <div
          class="next text-center color-fff cursor-pointer"
          :class="
            evaluateListIndex + 1 == evaluateList.length ? 'disabled' : ''
          "
          @click="handleNext"
        >
          下一条
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { numberToChinese } from '@/utils/crypto'
const evaluateList: any = ref([])
const evaluateListIndex = ref(0)
const currentvaluateList: any = ref({
  id: 3115899,
  slateNum: 0,
  sleaveEarlyNum: 0,
  srealityNum: 0,
  sshouldNum: 0,
  tlateMin: 0,
  bjmc: '林学231;林学232;林学233;林学234；',
  cdbh: '101500210X',
  cdmc: '教1楼210',
  classDate: '2025-06-09',
  comments:
    '当前课程的质量数据为优点优点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点点缺点缺点缺点缺点缺缺点缺点缺点缺点缺点缺点缺点缺点缺点缺点。',
  comments2: null,
  createTime: '2025-07-28 18:51:02',
  djj: '5',
  dwh: '20200',
  dwhName: '林业与生物技术学院',
  gh: '20080118|20220004',
  jxffysd: 0,
  jxgc: 0,
  jxgl: 0,
  jxnr: 20,
  jxtd: 7,
  jxtjbz1: null,
  jxtjbz2: null,
  jxxg: 0,
  kch: 'E0721022',
  kcmc: '植物病理学',
  kcsz: 10,
  pfr: null,
  pfrgh: null,
  roleType: '1',
  roleTypeName: null,
  sabsentNum: null,
  sknr: null,
  sknrjdb: null,
  sksj: null,
  status: 1,
  statusName: '已提交',
  szbh: null,
  tleaveEarlyMin: 0,
  updateTime: '7/29/25, 9:41 AM',
  xm: '王勇军',
  xn: '2024-2025',
  xq: 2,
  xqj: 1,
  zf: null,
  evaluates: [
    {
      index: 0,
      title: '课程思政 (总分: 10分)',
      content:
        '课堂教学中坚持正确政治方向，贯穿教书育人。落实课程思政要求，积极引导学生树立正确的世界观、人生观和价值观，注重学生理想信念和道德修养的培养。',
      score: 10,
      allScore: 10
    },
    {
      index: 1,
      title: '教学态度 (总分: 10分)',
      content:
        '备课认真充分，讲课投入，内容熟悉，注重为人师表，仪态大方，教风严谨。',
      score: 8,
      allScore: 10
    },
    {
      index: 2,
      title: '教学内容 (总分: 20分)',
      content:
        '课程教学目标明确，体现“以学为中心、以教为主导”教学理念。教学内容围绕教学目标设计，内容充实新颖，反映学科前沿，具有高阶性、创新性和挑战度。',
      score: 18,
      allScore: 20
    },
    {
      index: 3,
      title: '教学过程 (总分: 10分)',
      content:
        '目标明确，条理清楚，思路清晰，深入浅出，重点突出;语言准确流畅、简洁生动，富有激情。',
      score: 8,
      allScore: 10
    },
    {
      index: 4,
      title: '教学方法与手段 (总分: 20分)',
      content:
        '运用启发式教学，重视培养学生发现、分析、解决问题能力和开拓创新意识;灵活运用板书、教具、各种现代教育信息技术等辅助教学;开展混合式教学，教学互动良好。',
      score: 19,
      allScore: 20
    },
    {
      index: 5,
      title: '教学管理 (总分: 10分)',
      content: '教师对课堂教学秩序的管理有效，学生上课的精神饱满，注意力集中。',
      score: 9,
      allScore: 10
    },
    {
      index: 6,
      title: '教学效果 (总分: 20分)',
      content:
        '讲课有吸引力，课堂气氛好，学生思维活跃，有效掌握有关知识与技能，完成教学目标。',
      score: 15,
      allScore: 20
    }
  ]
})

const courseDetail: any = reactive({
  kcmc: '',
  kch: '',
  kcImgUrl: '',
  bh: '',
  xn: '',
  xq: '',
  classRoomNo: '',
  ghs: '',
  deptName: '',
  englishName: '',
  isStudent: '',
  kcjj: ''
})

const sumScore = computed(() => {
  return (
    currentvaluateList.value.kcsz +
    currentvaluateList.value.jxtd +
    currentvaluateList.value.jxnr +
    currentvaluateList.value.jxgc +
    currentvaluateList.value.jxffysd +
    currentvaluateList.value.jxgl +
    currentvaluateList.value.jxxg
  )
})

onMounted(() => {})

// 方法：将名字用 * 代替
const maskName = (name: any) => {
  if (!name) return ''
  const surname = name[0] // 获取姓氏
  const stars = '*'.repeat(name.length - 1) // 用 * 代替名字
  return surname + stars
}

// 上一条
const handlePre = () => {
  if (evaluateListIndex.value > 0) {
    evaluateListIndex.value -= 1
    currentvaluateList.value = evaluateList.value[evaluateListIndex.value]
  }
}

// 下一条
const handleNext = () => {
  if (evaluateListIndex.value <= evaluateList.value.length) {
    evaluateListIndex.value += 1
    currentvaluateList.value = evaluateList.value[evaluateListIndex.value]
  }
}
</script>

<style lang="scss" scoped>
.courseIntroduction {
  border-radius: 12px;
  padding: 64px;
  box-sizing: border-box;
  margin-top: 24px;
  .courseOutline-title {
    display: inline-block;
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 24px;
    color: #18191a;
    line-height: 30px;
    border-bottom: 2px solid #0f63ed;
    margin-bottom: 40px;
  }
}
.evaluateBox {
  .evaluateList {
    height: 106px;
    margin-top: 24px;
    background: linear-gradient(to top, #ffffff 0%, #f5f8fe 100%);
    border-radius: 10px 10px 10px 10px;
    position: relative;
    border: 1px solid #e6ebf0;
    .score-tiltle {
      padding: 0 24px;
      box-sizing: border-box;
    }
    .score-box {
      width: 146px;
      line-height: 106px;
      border-left: 1px solid #e6ebf0;
    }
    .score-tag {
      width: 80px;
      height: 32px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.suggestionBox {
  line-height: 22px;
  padding: 6px 16px;
  box-sizing: border-box;
  background: #fafafa;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 36px;
}
.toggleList {
  justify-content: flex-end;
  gap: 16px;
  div {
    width: 96px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #0f63ed;
  }
  .next {
    background: #0f63ed;
  }
}
</style>
